<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/js/vue.js"></script>
    <script src="static/js/jquery-2.2.4.js"></script>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">
        username:<input type="text" v-model="user.username"> {{user.username}}
        <br>
        password:<input type="text" v-model="user.password"> {{user.password}}

        <button  @click="login" class="btn-success">登录</button>

    </div>


    <script type="text/javascript">

       // var username = $("#username").val();
        //2.创建vue的实例
        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            //vue中的数据定义
            //1） 用户录入  2） 服务端返回的  3）静态数据
            data:{
                // user:{username:"zhangsan",
                // password:"admin"}   //修改
                user:{} //新增
            },
            methods:{
                login(){
                        alert(11);
                    $.post("/login",JSON.stringify(this.user),
                        function(r){

                        if (r.code==0){

                        }
                    });
                }
            }

        });


    </script>

</body>
</html>